<template>
	<view class="container">
		<view class="flex justify-between bg-white align-center border-radius-10 mt-20" style="padding: 10upx 30upx;">
			<view class="flex align-center">
				<!-- <uni-icons custom-prefix="iconfont" type="icon-camera" color="#F1BA48" size="28" /> -->
				<text class="fsize-28 ml-20">头像</text>
			</view>
		<view class="flex justify-between align-center">
				<view class="avatar">
					<image style="width: 100%;height: 100%;" @tap="buttonclick" :src="userInfo.avatarImage" size=""/>
					<!-- <view style="width: 100%;height: 100%;"></view> -->
				</view>
			<uni-icons custom-prefix="iconfont" type="icon-right" />
		</view>
		</view>
		
		<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20" @click="openNickName">
			<view class="flex align-center">
				<!-- <uni-icons custom-prefix="iconfont" type="icon-camera" color="#F1BA48" size="28" /> -->
				<text class="fsize-28 ml-20">昵称</text>
			</view>
		<view class="flex justify-between align-center">
				<view>{{userInfo.nickName}}</view>
			<uni-icons custom-prefix="iconfont" type="icon-right" />
		</view>
		</view>	
		
		<!-- 修改昵称的弹框 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="pop-content">
					<view style="display: flex;align-items: center;height: 100rpx;">
						昵称：
						<input v-model="newNickName" class="uni-input" focus placeholder="请输入要修改的昵称" :maxlength="50"  style="border: 1px solid #979797;height: 60rpx;padding-left: 10rpx;border-radius: 10rpx;"/>
					</view>
					<view class="submit-btn">
						<button type="primary" size="mini" @click="editNickName" style="maigin-top:50rpx;">提交</button>
					</view>
				</view>
			</uni-popup>
		
		<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20">
			<view class="flex align-center">
				<!-- <uni-icons custom-prefix="iconfont" type="icon-camera" color="#F1BA48" size="28" /> -->
				<text class="fsize-28 ml-20">会员卡号</text>
			</view>
		<view class="flex justify-between align-center">
				<view>{{userInfo.id}}</view>
		</view>
		</view>
		
		<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20">
			<view class="flex align-center">
				<!-- <uni-icons custom-prefix="iconfont" type="icon-camera" color="#F1BA48" size="28" /> -->
				<text class="fsize-28 ml-20">手机号码</text>
			</view>
		<view class="flex justify-between align-center">
				<view>{{userInfo.mobile}}</view>
		</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { uploadFile } from '@/utils/upload.js'
	export default {
		data() {
			return {
				newNickName:'',
				userInfo:{},
				tempFilePaths:'',
				sourceType: ['camera', 'album']
			}
		},
		onLoad(){
			this.getMemberInfos()
		},
		computed:{
			...mapState(['userBalance'])
		},
		methods:{
			// 获取个人信息
		async	getMemberInfos(){
			const _that = this
				const res = await _that.$api.getMemberInfo()
				_that.userInfo = res.data
				_that.userInfo.avatarImage = _that.userBalance.avatarImage
			},
			// 选择上传方式
			buttonclick(){  
				 //头像点击处理事件，使用uni.showActionSheet()调用菜单栏
				    const that = this
				    uni.showActionSheet({
				      itemList: ['拍照', '相册'],
				      itemColor: '',
				      //成功时回调
				      success: function (res) {
				        if (!res.cancel) {
				          /*
				           res.tapIndex返回用户点击的按钮序号，从上到下的顺序，从0开始
				           比如用户点击本例中的拍照就返回0，相册就返回1
				           我们res.tapIndex的值传给chooseImage()
				          */
				          that.chooseImage(res.tapIndex) // 调用封装的unichooseImage方法
				        }
				      },
				      //失败时回调
				      fail: function (res) {
				        console.log('调用失败')
				       },
				      complete: function (res) { },
				    })
			},
			  chooseImage(tapIndex) {
			    const checkeddata = true
			    const that = this
			    uni.chooseImage({
			    //count表示一次可以选择多少照片
			      count: 1,
			      //如果sourceType为camera则调用摄像头，为album时调用相册
			      sourceType: [that.sourceType[tapIndex]],
			    async success(res) {
						const result = await uploadFile('/api/Tools/UploadFiles', res.tempFilePaths[0])
						  await	that.$api.upLoadAvatar({id:result.data.fileUrl})
			        uni.showToast({
			          title: '设置成功',
			          icon: 'success',
			          duration: 2000
			        })
							that.userInfo.avatarImage = res.tempFilePaths[0]
			      },
						fail:(err)=> {
							console.log("err: ", err);
							// #ifdef APP-PLUS
							if (err["code"] && err.code !== 0 && this.sourceTypeIndex === 2) {
								this.checkPermission(err.code);
							}
							// #endif
							// #ifdef MP
							if (err.errMsg.indexOf("cancel") !== "-1") {
								return;
							}
							uni.getSetting({
								success: (res) => {
									let authStatus = false;
									switch (this.sourceTypeIndex) {
										case 0:
											authStatus = res.authSetting["scope.camera"];
											break;
										case 1:
											authStatus = res.authSetting["scope.album"];
											break;
										case 2:
											authStatus =
												res.authSetting["scope.album"] &&
												res.authSetting["scope.camera"];
											break;
										default:
											break;
									}
									if (!authStatus) {
										uni.showModal({
											title: "授权失败",
											content: "Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限",
											success: (res) => {
												if (res.confirm) {
													uni.openSetting();
												}
											},
										});
									}
								},
							});
							// #endif
						}
			    })
			  },
				// 编辑昵称
				openNickName() {
					 this.$refs.popup.open('bottom')
				},
			async	editNickName() {
					if(!this.newNickName) return uni.showToast({
						title:'输入不能为空',
						icon:'error'
					})
					await this.$api.editNickName({id:this.newNickName})
					uni.showToast({
						title:'修改成功'
					})
					this.userInfo.nickName = this.newNickName
					this.$refs.popup.close()
				}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar {
		width: 80rpx;
		height: 80rpx;
		background-color: #F1BA48;
		border-radius: 50%;
		overflow: hidden;
	}
	.nick-name {
		height: 200rpx;
		background-color: #fff;
	}
	
	// 修改昵称内容
	.pop-content {
		position: fixed;
		height: 300rpx;
		background-color: #fff;
		width: 100%;
		bottom: 0;
		left: 0;
		border-radius: 20rpx 20rpx 0 0 ;
		padding: 30rpx;
	}
	
</style>